<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <script src="../resources/js/jquery.min.js" type="text/javascript"></script>
        <script src="../resources/js/highstock.js"></script>
        <script src="../resources/js/highcharts.js"></script>
        <script src="../resources/js/exporting.js"></script>
        <script type="text/javascript">
            function renderChart(divId, chartType, chartTitle, chartData, categories){
                var options = createOption(divId, chartType, chartTitle, categories);
                options.series = $.parseJSON(chartData);
                //chart.xAxis[0].setCategories($.parseJSON(categories));
                var chart = new Highcharts.Chart(options);
            }
            
            function createOption(divId, chartType, chartTitle, categories){
                var options = {
                    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                    chart: {
                        backgroundColor: {
                            linearGradient: [0, 0, 500, 500],
                            stops: [
                                [0, 'rgb(255, 255, 255)'],
                                [1, 'rgb(240, 240, 255)']
                            ]
                        },
                        borderWidth: 2,
                        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                        plotShadow: true,
                        plotBorderWidth: 1,
                        renderTo: divId,
                        type: chartType
                    },
                    title: {
                        text: 'Matriz de Co-Ocurrencia Reducida 2D (Johnson -Lindenstrauss)',
                        style: {
                            color: '#000',
                            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    subtitle: {
                        text: 'Fuzzy Clustering project',
                        style: {
                            color: '#666666',
                            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    xAxis: {
                        ridLineWidth: 1,
                        lineColor: '#000',
                        tickColor: '#000',
                        //categories: $.parseJSON(categories),
                        labels: {
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            },
                            formatter: function() {
                                return this.value;
                            }
                        },
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                            }
                        }
                    },
                    yAxis: {
                        minorTickInterval: 'auto',
                        lineColor: '#000',
                        lineWidth: 1,
                        tickWidth: 1,
                        tickColor: '#000',
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                            },
                            text: 'PPMI Value'
                        },
                        labels: {
                            formatter: function() {
                                return this.value +'';
                            },
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            }
                        }
                    },
                    plotOptions: {
                    	series: {
       	                 marker: {
       	                     radius: 1.3
       	                 }
       	             },
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    tooltip: {
                    	headerFormat: '<b>{point.name}</b>'
                        
                    },
                    legend: {
                        itemStyle: {
                            font: '9pt Trebuchet MS, Verdana, sans-serif',
                            color: 'black'

                        },
                        itemHoverStyle: {
                            color: '#039'
                        },
                        itemHiddenStyle: {
                            color: 'gray'
                        }
                    },
                    labels: {
                        style: {
                            color: '#99b'
                        }
                    },
                    series: []
                };
                
                return options; 
            };
            
        </script>
	</h:head>
    <body>
        <h:form prependId="false">
			<h:commandButton onclick="renderChart('container','scatter','Sample Chart', '${termChartBean.chartData}', 
			'${termChartBean.categories}');" immediate="true" type="button"></h:commandButton>
        </h:form>
        <div id="container" style="width: 100%; height: 500px"></div>
    </body>
</html>